<form dForm ngForm [layout]="formLayout" [dValidateRules]="formConfig.rule" #form="dValidateRules" (dSubmit)="submitForm($event)">
  <div class="modal-body">
    <d-row [dGutter]="[0, 0]">
      <d-col [dSpan]="11">
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label [required]="true">{{ 'admin.userName' | translate }}</d-form-label>
              <d-form-control>
                <input
                  dTextInput
                  name="userName"
                  [(ngModel)]="formData.userName"
                  [dValidateRules]="formConfig.userNameRules"
                  [disabled]="true"
                />
              </d-form-control>
            </d-form-item>
          </d-col>
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label [required]="true">{{ 'admin.email' | translate }}</d-form-label>
              <d-form-control>
                <input dTextInput name="email" [(ngModel)]="formData.email" [dValidateRules]="formConfig.emailRules" [disabled]="true" />
              </d-form-control>
            </d-form-item>
          </d-col>
        </d-row>
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.nickName' | translate }}</d-form-label>
              <d-form-control>
                <input dTextInput name="nickName" [(ngModel)]="formData.nickName" [dValidateRules]="formConfig.nickNameRules" />
              </d-form-control>
            </d-form-item>
          </d-col>
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.realName' | translate }}</d-form-label>
              <d-form-control>
                <input dTextInput name="realName" [(ngModel)]="formData.realName" [dValidateRules]="formConfig.realNameRules" />
              </d-form-control>
            </d-form-item>
          </d-col>
        </d-row>
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.mobilePhone' | translate }}</d-form-label>
              <d-form-control>
                <input dTextInput name="mobilePhone" [(ngModel)]="formData.mobilePhone" [dValidateRules]="formConfig.mobilePhoneRules" />
              </d-form-control>
            </d-form-item>
          </d-col>
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.gender' | translate }}</d-form-label>
              <d-form-control>
                <d-select
                  [options]="genderList"
                  name="gender"
                  [filterKey]="'label'"
                  [(ngModel)]="formData.gender"
                  [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                >
                  <ng-template let-option="option"> {{ option['value'] + '-' + option['label'] }} </ng-template>
                </d-select>
              </d-form-control>
            </d-form-item>
          </d-col>
        </d-row>
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.idCardType' | translate }}</d-form-label>
              <d-form-control>
                <d-select
                  [options]="idCardTypeList"
                  name="idCardType"
                  [filterKey]="'label'"
                  [(ngModel)]="formData.idCardType"
                  [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                >
                  <ng-template let-option="option"> {{ option['value'] + '-' + option['label'] }} </ng-template>
                </d-select>
              </d-form-control>
            </d-form-item>
          </d-col>
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.idCardNo' | translate }}</d-form-label>
              <d-form-control>
                <input dTextInput name="idCardNo" [(ngModel)]="formData.idCardNo" [dValidateRules]="formConfig.idCardNoRules" />
              </d-form-control>
            </d-form-item>
          </d-col>
        </d-row>
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.nation' | translate }}</d-form-label>
              <d-form-control>
                <d-select
                  [options]="nationList"
                  name="nation"
                  [filterKey]="'label'"
                  [(ngModel)]="formData.nation"
                  [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                >
                  <ng-template let-option="option"> {{ option['value'] + '-' + option['label'] }} </ng-template>
                </d-select>
              </d-form-control>
            </d-form-item>
          </d-col>
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.birthday' | translate }}</d-form-label>
              <d-form-control>
                <div class="devui-input-group devui-dropdown-origin" style="width: 290px">
                  <input
                    class="devui-input devui-form-control"
                    dDatepicker
                    #birthdayDp="datepicker"
                    (click)="birthdayDp.toggle()"
                    name="birthday"
                    [(ngModel)]="birthdayTime"
                    dateFormat="yyyy-MM-dd"
                    mode="date"
                  />
                  <div *ngIf="birthdayTime" class="devui-input-group-addon close-icon-wrapper" (click)="birthdayDp.clearAll()">
                    <em class="icon icon-close"></em>
                  </div>
                  <div class="devui-input-group-addon" (click)="birthdayDp.toggle()">
                    <em class="icon icon-calendar"></em>
                  </div>
                </div>
              </d-form-control>
            </d-form-item>
          </d-col>
        </d-row>
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.qq' | translate }}</d-form-label>
              <d-form-control>
                <input dTextInput name="qq" [(ngModel)]="formData.qq" [dValidateRules]="formConfig.qqRules" />
              </d-form-control>
            </d-form-item>
          </d-col>
          <d-col [dSpan]="12">
            <d-form-item>
              <d-form-label>{{ 'admin.wechat' | translate }}</d-form-label>
              <d-form-control>
                <input dTextInput name="wechat" [(ngModel)]="formData.wechat" [dValidateRules]="formConfig.wechatRules" />
              </d-form-control>
            </d-form-item>
          </d-col>
        </d-row>
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="24">
            <d-form-item>
              <d-form-label>{{ 'admin.summary' | translate }}</d-form-label>
              <d-form-control>
                <textarea dTextarea name="summary" [(ngModel)]="formData.summary" [dValidateRules]="formConfig.summaryRules"></textarea>
              </d-form-control>
            </d-form-item>
          </d-col>
        </d-row>
        <d-row [dGutter]="[12, 12]">
          <d-col [dSpan]="24">
            <d-form-operation>
              <d-button bsStyle="primary" dFormSubmit>{{ 'app.common.operate.confirm.label' | translate }}</d-button>
            </d-form-operation>
          </d-col>
        </d-row>
      </d-col>
    </d-row>
  </div>
</form>
